<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            -webkit-overflow-scrolling: touch;
            box-sizing: border-box;
            max-width: 100%!important;
        }
        /* 隐藏视频默认的下载按钮*/
        video::-webkit-media-controls-enclosure {overflow:hidden;}
        video::-webkit-media-controls-panel {width: calc(100% + 30px);}

        /*隐藏音频的默认下载按钮*/

        audio::-webkit-media-controls-enclosure {overflow:hidden;}
        audio::-webkit-media-controls-panel {width: calc(100% + 30px);}
        body{
            font-size:14px;
            word-break:normal;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background: #fff;
            padding: 0;
            margin: 0;
            width: 100%;
        }
        ul{
            padding: 0;
        }
        img{
            max-width: 100%;
        }
        #content{
            padding: 10px 0;
            font-size:14px;
            line-height: 25px;
            color: #333;
            max-width: 100%;
            overflow: hidden;
            box-sizing: border-box;
        }
        .error-tip{
            position: absolute;
            top: 45%;
            left: 0;
            text-align: center;
            color: #999;
            width: 100%;
        }
        img{
            border-radius: 4px;
            max-width: 100%;
        }
        video{
            max-width: 100%;
            position: relative;
        }
        table{
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
            
        }
        td,th{
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            padding: 3px 5px;
        }
        th{
            border-bottom: 2px solid #ccc;
            text-align: center;
        }
        pre{
            margin: 5px 0;
        }
        code{
            display: block;
            zoom: 1;
            background-color: #f1f1f1;
            border-radius: 3px;
            padding: 3px 5px;
            margin: 0 3px;
            overflow: auto;
        }
        .video-div{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            position: relative;
        }
        .video-div img{
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index: 1;
            object-fit: cover;
        }
        .play-btn{
            position: absolute;
            z-index: 2;
            left: 50%;
            top: 50%;
            margin-left: -25px;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url()
        }
        .play-btn:active{
            opacity: 0.8;
        }
        .x-audio-wrap{
            height: 34px;
            width: 120px;
            border-radius: 17px;
            border: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
            margin: 0 auto;
        }
        .x-sector{
            height: 7px;
            width: 7px;
            border-radius:4px 10px;
            border-right: 2px solid #ddd;
            border-top: 2px solid #ddd;
            transform: rotate(45deg);
            position: relative;
            margin-left: 10px;
        }
        .x-sector::before{
            content: "";
            height: 9px;
            width: 9px;
            border-radius:4px 12px;
            border-right: 2px solid #ddd;
            border-top: 2px solid #ddd;
            transform: rotate(0deg);
            position: absolute;
            right: -7px;
            top: -7px;
        }
        .x-dot{
            height: 4px;
            width: 4px;
            border-radius: 4px;
            background: #ddd;
            position: absolute;
            top: 3px;
            left: -1px;
        }
        .x-time{
            color: #999;
            font-size: 12px;
            margin-right: 10px;
        }
        @keyframes play-dot{
            from{
                background: #ddd
            }
            to{
                background: #2d8cf0
            }
        }
        @keyframes play-sector{
            from{
                border-color: #ddd
            }
            to{
                border-color: #2d8cf0
            }
        }
        .x-sector.play{
            animation: play-sector 0.3s 0.1s ease-in-out;
        }
        .x-sector.play::before{
            animation: play-sector 0.3s 0.2s ease-in-out;
        }
        .x-sector.play .x-dot{
            animation: play-dot 0.3s ease-in-out;
        }
    </style>
</head>
<script>
!function(){"use strict";function t(e,o){function i(t,e){return function(){return t.apply(e,arguments)}}var r;if(o=o||{},this.trackingClick=!1,this.trackingClickStart=0,this.targetElement=null,this.touchStartX=0,this.touchStartY=0,this.lastTouchIdentifier=0,this.touchBoundary=o.touchBoundary||10,this.layer=e,this.tapDelay=o.tapDelay||200,this.tapTimeout=o.tapTimeout||700,!t.notNeeded(e)){for(var a=["onMouse","onClick","onTouchStart","onTouchMove","onTouchEnd","onTouchCancel"],c=this,s=0,u=a.length;u>s;s++)c[a[s]]=i(c[a[s]],c);n&&(e.addEventListener("mouseover",this.onMouse,!0),e.addEventListener("mousedown",this.onMouse,!0),e.addEventListener("mouseup",this.onMouse,!0)),e.addEventListener("click",this.onClick,!0),e.addEventListener("touchstart",this.onTouchStart,!1),e.addEventListener("touchmove",this.onTouchMove,!1),e.addEventListener("touchend",this.onTouchEnd,!1),e.addEventListener("touchcancel",this.onTouchCancel,!1),Event.prototype.stopImmediatePropagation||(e.removeEventListener=function(t,n,o){var i=Node.prototype.removeEventListener;"click"===t?i.call(e,t,n.hijacked||n,o):i.call(e,t,n,o)},e.addEventListener=function(t,n,o){var i=Node.prototype.addEventListener;"click"===t?i.call(e,t,n.hijacked||(n.hijacked=function(t){t.propagationStopped||n(t)}),o):i.call(e,t,n,o)}),"function"==typeof e.onclick&&(r=e.onclick,e.addEventListener("click",function(t){r(t)},!1),e.onclick=null)}}var e=navigator.userAgent.indexOf("Windows Phone")>=0,n=navigator.userAgent.indexOf("Android")>0&&!e,o=/iP(ad|hone|od)/.test(navigator.userAgent)&&!e,i=o&&/OS 4_\d(_\d)?/.test(navigator.userAgent),r=o&&/OS [6-7]_\d/.test(navigator.userAgent),a=navigator.userAgent.indexOf("BB10")>0;t.prototype.needsClick=function(t){switch(t.nodeName.toLowerCase()){case"button":case"select":case"textarea":if(t.disabled)return!0;break;case"input":if(o&&"file"===t.type||t.disabled)return!0;break;case"label":case"iframe":case"video":return!0}return/\bneedsclick\b/.test(t.className)},t.prototype.needsFocus=function(t){switch(t.nodeName.toLowerCase()){case"textarea":return!0;case"select":return!n;case"input":switch(t.type){case"button":case"checkbox":case"file":case"image":case"radio":case"submit":return!1}return!t.disabled&&!t.readOnly;default:return/\bneedsfocus\b/.test(t.className)}},t.prototype.sendClick=function(t,e){var n,o;document.activeElement&&document.activeElement!==t&&document.activeElement.blur(),o=e.changedTouches[0],n=document.createEvent("MouseEvents"),n.initMouseEvent(this.determineEventType(t),!0,!0,window,1,o.screenX,o.screenY,o.clientX,o.clientY,!1,!1,!1,!1,0,null),n.forwardedTouchEvent=!0,t.dispatchEvent(n)},t.prototype.determineEventType=function(t){return n&&"select"===t.tagName.toLowerCase()?"mousedown":"click"},t.prototype.focus=function(t){var e;o&&t.setSelectionRange&&0!==t.type.indexOf("date")&&"time"!==t.type&&"month"!==t.type?(e=t.value.length,t.setSelectionRange(e,e)):t.focus()},t.prototype.updateScrollParent=function(t){var e,n;if(e=t.fastClickScrollParent,!e||!e.contains(t)){n=t;do{if(n.scrollHeight>n.offsetHeight){e=n,t.fastClickScrollParent=n;break}n=n.parentElement}while(n)}e&&(e.fastClickLastScrollTop=e.scrollTop)},t.prototype.getTargetElementFromEventTarget=function(t){return t.nodeType===Node.TEXT_NODE?t.parentNode:t},t.prototype.onTouchStart=function(t){var e,n,r;if(t.targetTouches.length>1)return!0;if(e=this.getTargetElementFromEventTarget(t.target),n=t.targetTouches[0],o){if(r=window.getSelection(),r.rangeCount&&!r.isCollapsed)return!0;if(!i){if(n.identifier&&n.identifier===this.lastTouchIdentifier)return t.preventDefault(),!1;this.lastTouchIdentifier=n.identifier,this.updateScrollParent(e)}}return this.trackingClick=!0,this.trackingClickStart=t.timeStamp,this.targetElement=e,this.touchStartX=n.pageX,this.touchStartY=n.pageY,t.timeStamp-this.lastClickTime<this.tapDelay&&t.preventDefault(),!0},t.prototype.touchHasMoved=function(t){var e=t.changedTouches[0],n=this.touchBoundary;return Math.abs(e.pageX-this.touchStartX)>n||Math.abs(e.pageY-this.touchStartY)>n?!0:!1},t.prototype.onTouchMove=function(t){return this.trackingClick?((this.targetElement!==this.getTargetElementFromEventTarget(t.target)||this.touchHasMoved(t))&&(this.trackingClick=!1,this.targetElement=null),!0):!0},t.prototype.findControl=function(t){return void 0!==t.control?t.control:t.htmlFor?document.getElementById(t.htmlFor):t.querySelector("button, input:not([type=hidden]), keygen, meter, output, progress, select, textarea")},t.prototype.onTouchEnd=function(t){var e,a,c,s,u,l=this.targetElement;if(!this.trackingClick)return!0;if(t.timeStamp-this.lastClickTime<this.tapDelay)return this.cancelNextClick=!0,!0;if(t.timeStamp-this.trackingClickStart>this.tapTimeout)return!0;if(this.cancelNextClick=!1,this.lastClickTime=t.timeStamp,a=this.trackingClickStart,this.trackingClick=!1,this.trackingClickStart=0,r&&(u=t.changedTouches[0],l=document.elementFromPoint(u.pageX-window.pageXOffset,u.pageY-window.pageYOffset)||l,l.fastClickScrollParent=this.targetElement.fastClickScrollParent),c=l.tagName.toLowerCase(),"label"===c){if(e=this.findControl(l)){if(this.focus(l),n)return!1;l=e}}else if(this.needsFocus(l))return t.timeStamp-a>100||o&&window.top!==window&&"input"===c?(this.targetElement=null,!1):(this.focus(l),this.sendClick(l,t),o&&"select"===c||(this.targetElement=null,t.preventDefault()),!1);return o&&!i&&(s=l.fastClickScrollParent,s&&s.fastClickLastScrollTop!==s.scrollTop)?!0:(this.needsClick(l)||(t.preventDefault(),this.sendClick(l,t)),!1)},t.prototype.onTouchCancel=function(){this.trackingClick=!1,this.targetElement=null},t.prototype.onMouse=function(t){return this.targetElement?t.forwardedTouchEvent?!0:t.cancelable&&(!this.needsClick(this.targetElement)||this.cancelNextClick)?(t.stopImmediatePropagation?t.stopImmediatePropagation():t.propagationStopped=!0,t.stopPropagation(),t.preventDefault(),!1):!0:!0},t.prototype.onClick=function(t){var e;return this.trackingClick?(this.targetElement=null,this.trackingClick=!1,!0):"submit"===t.target.type&&0===t.detail?!0:(e=this.onMouse(t),e||(this.targetElement=null),e)},t.prototype.destroy=function(){var t=this.layer;n&&(t.removeEventListener("mouseover",this.onMouse,!0),t.removeEventListener("mousedown",this.onMouse,!0),t.removeEventListener("mouseup",this.onMouse,!0)),t.removeEventListener("click",this.onClick,!0),t.removeEventListener("touchstart",this.onTouchStart,!1),t.removeEventListener("touchmove",this.onTouchMove,!1),t.removeEventListener("touchend",this.onTouchEnd,!1),t.removeEventListener("touchcancel",this.onTouchCancel,!1)},t.notNeeded=function(t){var e,o,i,r;if("undefined"==typeof window.ontouchstart)return!0;if(o=+(/Chrome\/([0-9]+)/.exec(navigator.userAgent)||[,0])[1]){if(!n)return!0;if(e=document.querySelector("meta[name=viewport]")){if(-1!==e.content.indexOf("user-scalable=no"))return!0;if(o>31&&document.documentElement.scrollWidth<=window.outerWidth)return!0}}if(a&&(i=navigator.userAgent.match(/Version\/([0-9]*)\.([0-9]*)/),i[1]>=10&&i[2]>=3&&(e=document.querySelector("meta[name=viewport]")))){if(-1!==e.content.indexOf("user-scalable=no"))return!0;if(document.documentElement.scrollWidth<=window.outerWidth)return!0}return"none"===t.style.msTouchAction||"manipulation"===t.style.touchAction?!0:(r=+(/Firefox\/([0-9]+)/.exec(navigator.userAgent)||[,0])[1],r>=27&&(e=document.querySelector("meta[name=viewport]"),e&&(-1!==e.content.indexOf("user-scalable=no")||document.documentElement.scrollWidth<=window.outerWidth))?!0:"none"===t.style.touchAction||"manipulation"===t.style.touchAction?!0:!1)},t.attach=function(e,n){return new t(e,n)},"function"==typeof define&&"object"==typeof define.amd&&define.amd?define(function(){return t}):"undefined"!=typeof module&&module.exports?(module.exports=t.attach,module.exports.FastClick=t):window.FastClick=t}();
</script>
<body>
    <div id="content">
    </div>
</body>
<script>
    // if ('addEventListener' in document) {
    //     document.addEventListener('DOMContentLoaded', function() {
    //         FastClick.attach(document.body);
    //     }, false);
    // }
    var params=getRequest()
    getDetail(params.id)
    //原生环境设置内容
    function setData(data){
        var temp=document.createElement('div')
        temp.innerHTML=data
        bindEvent(temp)
        document.getElementById('content').innerHTML=''
        document.getElementById('content').appendChild(temp)
    }
    //绑定原生事件/处理音频
    function bindEvent(temp){
        var imgs=temp.getElementsByTagName('img')
        for(var i=0;i<imgs.length;i++){
            var img=imgs[i]
            img.addEventListener('click',function(){
                window.JSObjectProtocol.openPhoto(this.src)
            })
        }
        var videos=temp.getElementsByTagName('video')
        for(var i=0;i<videos.length;i++){
            var video=document.createElement('div')
            video.style.width='100%'
            video.style.height=(document.body.clientWidth*9/16)+'px'
            video.innerHTML=`<div class="video-div"><img src="${videos[i].poster}" /><div class="play-btn" data-src="${videos[i].src}"></div></div>`
            videos[i].parentNode.insertBefore(video,videos[i])
            video.querySelector('.play-btn').addEventListener('click',function(){
                window.JSObjectProtocol.openVideo(this.getAttribute('data-src'))
            })
            videos[i].parentNode.removeChild(videos[i])
        }

        var links=temp.getElementsByTagName('a')
        for(var i=0;i<links.length;i++){
            links[i].setAttribute('href','javascript:void(0)')
        }

        var audios=temp.getElementsByTagName('audio')
        if(audios.length==0){
            return false
        }
        window.audioPlayer=new Audio()
        for(var i=0;i<audios.length;i++){
            var br=audios[i].parentNode.getElementsByTagName('br')[0]
            br&&audios[i].parentNode.removeChild(audios[i].parentNode.getElementsByTagName('br')[0])
            var audio=document.createElement('div')
            audio.className="x-audio-wrap"
            audio.setAttribute('data-src',audios[i].src)
            audio.innerHTML=`<div class="x-sector">
                        <div class="x-dot"></div>
                    </div>
                    <div class="x-time">轻触播放</div>`
            audios[i].parentNode.insertBefore(audio,audios[i])
            audios[i].parentNode.removeChild(audios[i])

            audio.onclick=function(e){
                
                clearInterval(window.timer)
                window.currentPlayer=audio
                var src=audio.getAttribute('data-src')
                if(src==window.audioPlayer.src){
                    if(window.audioPlayer.paused){
                        window.audioPlayer.play()
                    }else{
                        window.audioPlayer.pause()
                    }
                }else{
                    window.audioPlayer.src=src
                    window.audioPlayer.play()
                    if(audio.querySelector('.x-time').innerText=='轻触播放'){
                        audio.querySelector('.x-time').innerText='加载中'
                    }
                }
                
            }
            window.audioPlayer.addEventListener('canplaythrough',function(e){
                window.currentPlayer.querySelector('.x-time').innerText=secondFormat(window.audioPlayer.duration)
            })
            window.audioPlayer.oncanplay=function(){
                animation(window.currentPlayer)
            }
            window.audioPlayer.onpause=function(){
                window.currentPlayer.querySelector('.x-sector').classList='x-sector'
                window.timer&&clearInterval(timer)
            }
            window.audioPlayer.onended=function(){
                window.currentPlayer.querySelector('.x-sector').classList='x-sector'
                window.timer&&clearInterval(timer)
            }
        }

    }

    //音频播放动画
    function animation(sector){
        var target=sector.querySelector('.x-sector')
        target.classList='x-sector'
        target.classList=target.classList+' play'
        timer=setInterval(function() {
            target.classList='x-sector'
            setTimeout(function(){
                target.classList=target.classList+' play'
            },100)
        }, 1000);
    }
    //秒数格式化
    function secondFormat(s){
        var t='';
        if(s > -1){
            var min = Math.floor(s/60) % 60;
            var sec = s % 60;

            if(min < 10){t += "0";}
            t += min + "'";
            if(sec < 10){t += "0";}
            t += sec.toFixed(2);
        }
        t=t.replace('.','\"')
        return t;
    }
    
    //获取url参数
    function getRequest() {   
        var url = location.search; //获取url中"?"符后的字串   
        var theRequest = new Object();   
        if (url.indexOf("?") != -1) {   
            var str = url.substr(1);   
            strs = str.split("&");   
            for(var i = 0; i < strs.length; i ++) {   
                theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);   
            }   
        }   
        return theRequest;   
    }

    //获取数据
    function getDetail(id){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {//服务器返回值的处理函数，此处使用匿名函数进行实现
            if (xhr.readyState == 4 && xhr.status == 200) {//
                var res=JSON.parse(xhr.responseText)
                if(res.code=='00'){
                    setData(res.data.userPgc.pgcContent)
                }else{
                    document.getElementById('content').innerHTML=`<div class="error-tip">${res.msg}</div>`
                    console.log(res.msg)
                }
                
            }
        };
        var host='http://dev.cztec.com/'
        if(params.target){
            var urls={
                'dev':'http://dev.cztec.com/',
                'pre':'http://pre.cztec.com/',
                'pro':'http://api.cztec.com/',
                'release':'http://release.cztec.com/',
            }
            host=urls[params.target]
            if(!host)host=urls['dev']
        }
        xhr.open("POST", host+"app/pgc/userPgcDetail", true);//提交get请求到服务器
        xhr.setRequestHeader('content-type','application/json')
        xhr.send(JSON.stringify({pgcId:id}))
    }
    
    //暂停音频
    function pauseAudio(){
        window.audioPlayer.pause()
    }
</script>
</html>
